<template>
  <div class="box p10">
    <div class="bg-white p10">
        <div class="mb10 level">
          <div class="left">
            <el-input type="text" size="small" placeholder="用户姓名"></el-input>
          </div>
          <div class="left ml10">
            <el-button type="primary" size="small" icon="el-icon-search">搜索</el-button>
          </div>
          <div class="right">
            <el-button type="primary" @click="save" size="small">新增</el-button>
            <el-button type="danger" size="small">禁用</el-button>
            <el-button type="danger" size="small">重置密码</el-button>
          </div>
        </div>
        <el-table
            :data="dataSource.users"
            border
            size="small"
            :default-sort = "{prop: 'createTime', order: 'descending'}"
            style="width: 100%">
          <el-table-column
              type="selection"
              align="center"
              width="55">
          </el-table-column>
          <el-table-column
              prop="nickName"
              label="用户姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="account"
              label="用户名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="email"
              label="电子邮件"
              width="180">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="联系方式"
              width="180">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态"
              width="70">
            <template #default="scope">
              <el-tag size="small" :type="scope.row.status === '00' ? 'primary' : 'success'" disable-transitions>
                <span v-if="scope.row.status === '00'">正常</span>
                <span v-if="scope.row.status === '01'">停用</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="address"
              width="200"
              label="地址">
          </el-table-column>
          <el-table-column
              prop="createTime"
              width="100"
              sortable
              label="注册时间">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <el-dialog title="新增用户" v-model="dataSource.dialogFormVisible" width="35%">
          <el-form :model="dataSource.userForm" :inline="true" label-width="80px" size="small">
            <el-form-item label="用户账号">
              <el-input v-model="dataSource.userForm.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称">
              <el-input v-model="dataSource.userForm.nickName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电子邮件">
              <el-input v-model="dataSource.userForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="dataSource.userForm.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户角色" prop="region">
              <el-select v-model="form.region" placeholder="请选择角色" class="imi-select">
                <el-option label="超级管理员" value="shanghai"></el-option>
                <el-option label="普通管理员" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属岗位" prop="region">
              <el-select v-model="form.region" placeholder="请选择岗位" class="imi-select">
                <el-option label="超级管理员" value="shanghai"></el-option>
                <el-option label="普通管理员" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属机构" prop="region">
              <el-select v-model="form.region" placeholder="请选择机构" class="imi-select">
                <el-option label="阿里巴巴有限公司" value="shanghai"></el-option>
                <el-option label="腾讯科技有限公司" value="beijing"></el-option>
                <el-option label="阿里巴巴有限公司" value="shanghai"></el-option>
                <el-option label="阿里巴巴有限公司" value="shanghai"></el-option>
                <el-option label="阿里巴巴有限公司" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
          <span class="dialog-footer">
          <el-button  size="small" @click="dataSource.dialogFormVisible = false">取 消</el-button>
          <el-button  size="small" type="primary" @click="dataSource.dialogFormVisible = false">确 定</el-button>
          </span>
          </template>
        </el-dialog>
    </div>
  </div>
</template>

<script>
import {reactive,defineComponent} from 'vue'
import {ElTable,ElForm} from 'element-plus'
export default defineComponent({
  name: "SysUser",
  components:{
    ElTable,
    ElForm
  },
  setup(){
    const  dataSource = reactive({
      dialogFormVisible:false,
      userForm:{account:'',nickName:'',email:'',phone:''},
      users:[
        {id:1,account:'huojihua',nickName:'霍建华',date:'2021-10-10',email:'1605009393@qq.com',phone:'18501166419',status:'00',createTime:'20201-10-12',address:'上海市普陀区金沙江路 1518 弄'},
        {id:2,account:'linxinru',nickName:'林心如',date:'2021-10-10',email:'1605009393@qq.com',phone:'18501166419',status:'01',createTime:'20201-10-13',address:'上海市普陀区金沙江路 1518 弄'},
        {id:3,account:'huojihua',nickName:'霍建华3',date:'2021-10-10',email:'1605009393@qq.com',phone:'18501166419',status:'00',createTime:'20201-10-12',address:'上海市普陀区金沙江路 1518 弄'},
        {id:4,account:'linxinru',nickName:'林心如4',date:'2021-10-10',email:'1605009393@qq.com',phone:'18501166419',status:'01',createTime:'20201-10-13',address:'上海市普陀区金沙江路 1518 弄'},
        {id:5,account:'huojihua',nickName:'霍建华5',date:'2021-10-10',email:'1605009393@qq.com',phone:'18501166419',status:'00',createTime:'20201-10-12',address:'上海市普陀区金沙江路 1518 弄'},
        {id:6,account:'linxinru',nickName:'林心如6',date:'2021-10-10',email:'1605009393@qq.com',phone:'18501166419',status:'01',createTime:'20201-10-13',address:'上海市普陀区金沙江路 1518 弄'},
        {id:7,account:'huojihua',nickName:'霍建华7',date:'2021-10-10',email:'1605009393@qq.com',phone:'18501166419',status:'00',createTime:'20201-10-12',address:'上海市普陀区金沙江路 1518 弄'},
        {id:8,account:'linxinru',nickName:'林心如8',date:'2021-10-10',email:'1605009393@qq.com',phone:'18501166419',status:'01',createTime:'20201-10-13',address:'上海市普陀区金沙江路 1518 弄'},
        {id:9,account:'huojihua',nickName:'霍建华9',date:'2021-10-10',email:'1605009393@qq.com',phone:'18501166419',status:'00',createTime:'20201-10-12',address:'上海市普陀区金沙江路 1518 弄'},
        {id:10,account:'linxinru',nickName:'林心如10',date:'2021-10-10',email:'1605009393@qq.com',phone:'18501166419',status:'01',createTime:'20201-10-13',address:'上海市普陀区金沙江路 1518 弄'}
      ]
    })
    const  handleEdit = (v)=>{
      dataSource.userForm = dataSource.users[v]
      dataSource.dialogFormVisible = true
    }
    const  save = () =>{
      dataSource.userForm={},
      dataSource.dialogFormVisible = true;
    }
    return {
      total:0,
      form:{
        name:'',
        region:'',
      },
      currentPage4: 1,
      dataSource,
      save,
      handleEdit
    }
  },
  methods:{
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
})
</script>

<style scoped>

</style>
